<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <tool-tree :tree-data="company" :judge="true" />
        <hr>
        <!-- 树形结构 -->
        <el-tree
          :data="depts"
          default-expand-all
        >
          <template #default="{data}">
            <!-- 内容 -->
            <tool-tree :tree-data="data" @isTimeGet="isTimeGetFn" @changeShow="showAddFn" />
            <!-- 内容 -->
          </template>
        </el-tree>
        <!-- 树形结构 -->
      </el-card>
      <!-- 弹窗 -->
      <isdialog ref="showEcho" :show.sync="show" :node-data="nodeData" @render="renderData" />
      <!-- 弹窗 -->
    </div>
  </div>
</template>

<script>
import toolTree from './tool-tree.vue'
import { getCompanyList } from '@/api/company'
import { listTreeDate } from '@/utils/index'
import Isdialog from './Isdialog.vue'

export default {
  components: { toolTree, Isdialog },
  // todo : 组织架构
  data() {
    return {
      nodeData: {}, // 组织数据

      show: false,
      company: {
        name: '村村通养猪场🐖',
        principal: '负责人'
      },
      depts: []
    }
  },
  async created() {
    // 获取组织架构信息
    const { depts } = await getCompanyList()

    this.depts = listTreeDate(depts, '')
  },
  methods: {
    // 获取部门信息 点击了树形结构的修改按钮触发的函数
    async isTimeGetFn(treeData) {
      this.show = true
      // 触发弹窗组件的回显函数
      this.$refs.showEcho.showChangeDialog(treeData.id)
    },
    showAddFn(nodeData) {
      this.show = true
      this.nodeData = nodeData
      console.log(this.nodeData)
    },
    // 重新渲染数据
    async renderData() {
      const { depts } = await getCompanyList()

      this.depts = listTreeDate(depts, '')
    }
  }
}

</script>

<style>

</style>
